<template>
  <div class="sankey-chart-container">
    <div class="chart-header">
      <span>专业就业流向分析</span>
      <el-select v-model="selectedYear" placeholder="选择年份" style="width: 180px">
        <el-option v-for="year in years" :key="year" :label="year" :value="year" />
      </el-select>
    </div>
    <CommonChart :options="chartOptions" height="calc(100% - 40px)" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"
import type { EChartsOption } from "echarts"
import { CommonChart } from "./index"

const selectedYear = ref(2022)
const years = ref([2022, 2023, 2024])

const chartOptions = computed<EChartsOption>(() => ({
  series: [
    {
      type: "sankey",
      emphasis: {
        focus: "adjacency"
      },
      data: [
        { name: "计算机类" },
        { name: "金融类" },
        { name: "IT行业" },
        { name: "金融行业" },
        { name: "互联网企业" },
        { name: "银行" }
      ],
      links: [
        { source: "计算机类", target: "IT行业", value: 300 },
        { source: "计算机类", target: "互联网企业", value: 200 },
        { source: "金融类", target: "金融行业", value: 250 },
        { source: "金融类", target: "银行", value: 180 }
      ]
    }
  ]
}))
</script>

<style lang="scss" scoped>
.sankey-chart-container {
  width: 100%;
  height: 100%;
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
</style>
